/**
 * FixedBtnProperty module
 */
import editorWidget from "../../../actions/Editor/widgets";
import editorActions from "../../../actions/Editor/editor";
import editorDialog from "../../../actions/Editor/dialog";
import editorPage from '../../../actions/Editor/pages'

import {bindActionCreators} from 'redux';
import {connect} from 'dva';
import React, {Component} from 'react';

import ColorPicker from "./ColorPicker";
import consts from "../../../utils/consts";
import CommonProperty from "./CommonProperty";
import UploadPictureDialog from '../../dialog/UploadPictureDialog'
// var dataProvider = require("../provider/dataProvider");
// var autoSaveProvider = require("../provider/autoSaveProvider");
class FixedBtnProperty extends Component {
    mixins:
    [CommonProperty]

    componentWillMount() {
        var property = this.props.selectedWidget;
        this.setState({
            icon: property.icon,
            custom: parseInt(property.custom),
            flag: true,
        });
        this.storeData = {};
    }

    open_floating_tips() {
        this.setState({show_floating_tips: !this.state.show_floating_tips});
    }

    handleOnPropertyChange(e) {
        const {selectedWidget, updateWidget, setState}=this.props;
        const input = $(e.target || e.srcElement);
        let data = selectedWidget;
        const type = input.attr("name"), val = input.val();
        data = this.buildNewData(data, type, val);
        setState({selectedWidget: data});
        updateWidget(data);
        this.setState({flag: !this.state.flag});
    }

    handleOnInputBlur() {
        // this.updateWidget(this.storeData);
    }

    handleOnRadiusChanged(e) {
        const {selectedWidget, updateWidget, setState}=this.props;
        const elem = $(e.target || e.srcElement);
        const radius = parseFloat(elem.val()) || 0;
        let widget = selectedWidget;
        widget.radius = radius >
        Math.min(widget.width, widget.height) / 2 ?
        Math.min(widget.width, widget.height) / 2 : radius;
        widget.property_changed = new Date();
        setState({selectedWidget: widget});
        updateWidget(widget);
        this.setState({flag: !this.state.flag});
    }

    handleOnStatusChange(e) {
        const {selectedWidget, updateWidget, setState}=this.props;
        var className = "info-item";
        let widget = selectedWidget;
        let element = $(e.target || e.srcElement);
        element = element.hasClass(className) ? element : element.parents("." + className);
        // name, icon
        const type = element.attr("name");
        let params = null;
        if ("icon" === type) {
            params = {
                icon: !selectedWidget.icon
            };
        }
        if ("custom" === type) {
            var custom = parseInt(element.attr("data-custom"));
            params = {
                custom: custom
            }
        }
        widget = $.extend(widget, params);
        updateWidget(widget);
        setState({selectedWidget: widget});
        this.setState({flag: !this.state.flag});
    }

    handleOnChangePictureDialog(e) {
        const {openDialog, closeDialog, editor}=this.props;
        openDialog('public/uploadPicture', UploadPictureDialog, editor, {
                closeDialog
            }
        );
        // var root = this.props.root;
        // root.openDialog(consts.DIALOG_TYPE.UPLOAD_PICTURE);
    }

    buildNewData(data, type, val) {
        var newData = "{\"" + type + "\":\"" + val + "\"}";
        newData = JSON.parse(newData);

        return $.extend(true, data, newData);
    }

    handleOnChangeTab(event) {
        const {setState}=this.props
        let {status}=this.props;
        status.showFloatingHead = true;
        var tabName = $(event.target || event.srcElement).attr("datatype");
        setState({status: status, focusTab: tabName});
    }

    render() {
        const {property}=this.props;
        let defaultButtonNode = "";
        let uploadedStyle = {};
        if (property.custom && property.url) {
            // 上传后的样式
            uploadedStyle = {
                background: "url(" + property.url + ") no-repeat center",
                backgroundSize: "cover"
            };
        }
        if (property.custom == 1) {
            defaultButtonNode =
                <div className='widget-meta-custom'>
                    <div type="button" tabIndex="-1" className="custom-image-btn-img"
                         onClick={(e)=>this.handleOnChangePictureDialog(e)} style={uploadedStyle}>
                        <span className={property.url ? "uploadedStyle": ""}>{$._('Upload custom image')}</span>
                    </div>
                </div>
        }
        else {
            defaultButtonNode =
                <div className="widget-meta-default">
                    <div className="rowlist">
                        <label>{$._("Chamfer")}</label>
                        <input name='radius' type="text" value={property.radius}
                               className="property-radius form-control" data-graph-radius min="0"
                               onChange={(e)=>this.handleOnRadiusChanged(e)} onBlur={()=>this.handleOnInputBlur()}/>
                    </div>
                    <div className="rowlist istubiao">
                        <label className="pull-left">{$._('Icon')}</label>
                        <div name='icon' value={property.icon}
                             className={"info-item info-item-icon " + (property.icon ? "icon-uniF52F" : "icon-uniF471")}
                             onClick={(e)=>this.handleOnStatusChange(e)}></div>
                    </div>
                    <ColorPicker widget={property}/>
                </div>
        }
        var start_time = property.start_time || 0;
        return (
            <div>
                <form noValidate className="property-container property" name="form.name">
                    <div className='floating_screen'>
                        <header className='floatingbtn_head'>
                            <div className="floatingfocus">{$._('Fixed button property')}</div>
                            <div onClick={(e)=>this.handleOnChangeTab(e)}
                                 datatype={consts.FOCUS_TABS.EVENT}>{$._("Interactive")}</div>
                        </header>
                        <div className="floating_content">
                            <a className='float_btn_help'
                               onClick={()=>this.open_floating_tips()}>{$._('What is the fixed button')}</a>
                            <div className="floating_tips"
                                 style={{display:this.state.show_floating_tips?"block":'none'}}
                                 onClick={()=>this.open_floating_tips()}>
                                <img src="/static/idealsee/images/new_editor/editor/show_floating.png"/>
                            </div>
                            <div className="standard">
                                <div className={property.custom == 1 ? "noactivebtn info-item" : "activebtn info-item"}
                                     onClick={(e)=>this.handleOnStatusChange(e)} name='custom' data-custom='0'>
                                    <span>{$._('Default style')}</span>
                                </div>
                                <div className={property.custom == 1 ? "activebtn info-item" : "noactivebtn info-item"}
                                     onClick={(e)=>this.handleOnStatusChange(e)} name='custom' data-custom='1'>
                                    <span>{$._("Custom")}</span>
                                </div>
                            </div>
                            {defaultButtonNode}
                            <div className="floating_btn_delaytime">
                                <div>{$._("Button appears time, page load")}</div>
                                <div>
                                    <label>{$._('Delay')}</label>
                                    <input name='start_time' type='range' min='1' className='delaytime_range' min='0'
                                           max="60" step="1" value={start_time}
                                           onChange={(e)=>this.handleOnPropertyChange(e)}
                                           onBlur={()=>this.handleOnInputBlur()}/>
                                    <div className='pull-right'>{start_time}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        )
    }
}
const mapStateToProps = ({editor}) => {
    return {
        property: editor.selectedWidget,
        status: editor.status,
        focusTab: editor.focusTab,
        ...editor,
        editor: editor
    };
};

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({...editorActions, ...editorWidget, ...editorDialog, ...editorPage}, dispatch);
};


export default connect(mapStateToProps, mapDispatchToProps)(FixedBtnProperty);
